<template>
  <div class="subjectmanageBox">
    <div class="title-hint">科目设置</div>
    <div class="title-add">
      <span>添加科目：</span>
      <el-input v-model="newSubject" style="width:300px;" />
      <el-button type="primary">添加</el-button>
    </div>
    <div class="subjectList">
      <template v-for="(item, index) in course">
        <div :key="index" class="listBox">
          <div v-if="editIndex!== index">
            <div class="list-title">{{ item }}</div>
            <el-button type="primary" size="small" icon="el-icon-edit" @click="editsuject(index)" />
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deletesubject(index)"
            />
          </div>
          <div v-if="editIndex== index">
            <el-input v-model="editWord" size="small" style="width:212px;" />
            <el-button type="success" size="small" @click="savesuject(index)">保存</el-button>
            <el-button size="small" @click="canclesubject">取消</el-button>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      course: [],
      newSubject: '',
      editIndex: -1,
      editWord: 'ss'
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.course = this.$route.query.course
      console.log(this.course)
    },
    editsuject(index) {
      this.editIndex = index
    },
    deletesubject(index) {
      this.$confirm('确定要删除该科目吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.course.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    savesuject() {
      this.editIndex = -1
    },
    canclesubject() {
      this.editIndex = -1
    }
  }
}
</script>

<style lang="scss" scoped>
.subjectmanageBox {
  // padding: 0 20px;
  .title-hint {
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    background-color: #87cefa;
  }
  .title-add {
    margin-left: 60px;
    padding: 10px 0;
  }
  .subjectList {
    margin-left: 150px;
  }
  .listBox {
    margin: 10px 0;
    background-color: #eee;
    width: 360px;
    padding: 5px;
    .list-title {
      display: inline-block;
      width: 235px;
    }
  }
}
</style>
